import React, { useEffect, useState } from "react";
import * as echarts from "echarts";
import mapJson from '@/assets/mapData/china.json'
import { GeoJSONSourceInput } from "echarts/types/src/coord/geo/geoTypes.js";
import { ECBasicOption } from "echarts/types/src/util/types.js";

const MapChart: React.FC<any> = ({ MapChartData }) => {
  let [MapChart_chart] = useState<echarts.ECharts>();

  //   useEffect(()=>{
  //     console.log(MapChartData);

  //       },[MapChartData])
  useEffect(() => {
    echarts.registerMap('china', mapJson as GeoJSONSourceInput)
    MapChart_chart = echarts.init(
      document.getElementById("MapChart_chart") as HTMLElement
    );

    // 构建option配置对象
    const options = {
        timeline: {
          data: MapChartData.voltageLevel,
          axisType: 'category',
          autoPlay: true,
          playInterval: 3000,
          left: '10%',
          right: '10%',
          bottom: '0%',
          width: '80%',
          label: {
            color: '#ddd',
          },
          symbolSize: 10,
          lineStyle: {
            color: '#555'
          },
          checkpointStyle: {
            borderColor: '#888',
            borderWidth: 2
          },
          controlStyle: {
            showNextBtn: true,
            showPrevBtn: true,
            color: '#666',
            borderColor: '#666',
          },
          emphasis: {
            label: {
              color: '#fff',
            },
            controlStyle: {
              color: '#aaa',
              borderColor: '#aaa',
            },
          },
        },
        baseOption: {
          grid: {
            right: '2%',
            top: '15%',
            bottom: '10%',
            width: '20%'
          },
          geo: {
            show: true,
            map: 'china',
            roam: true,
            zoom: 0.8,
            center: [113.83531246, 34.0267395887],
            itemStyle: {
              borderColor: 'rgba(147,235,248,1)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(147,235,248,0)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(147,235,248,0.2)'
                  }
                ]
              },
            },
            emphasis: {
              areaColor: '#389BB7',
              borderWidth: 0
            }
          }
        },
        options: [] as any
      };
      
      MapChartData.voltageLevel.forEach((item: any, index: string | number) => {
        options.options.push({
          backgroundColor: '#142037',
          title: [
            {
              text: '2019-2023 年度数据统计',
              left: '0%',
              top: '0%',
              color: '#ccc',
              fontSize: 25
            },
            {
              id: 'statistic',
              text: item + '年度数据统计',
              right: '0%',
              top: '4%',
              color: '#ccc',
              fontSize: 25
            }
          ],
          xAxis: {
            type: 'value',
            scale: true,
            position: 'top',
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              margin: 2,
              color: '#aaa'
            }
          },
          yAxis: {
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#ddd'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              color: '#ddd'
            },
            data: MapChartData.categoryData[item].map((item: { name: any; }) => item.name)
          },
          series: [
            {
              type: 'bar',
              zlevel: 1.5,
              itemStyle: {
                color: MapChartData.colors[index]
              },
              data: MapChartData.categoryData[item].map((item: { value: any; }) => item.value)
            },
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              data: MapChartData.topData[item],
              symbolSize: function (val: number[]) {
                return val[2] / 4
              },
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke'
              },
              label: {
                formatter: '{b}',
                position: 'right',
                show: true
              },
              itemStyle: {
                color: MapChartData.colors[index],
                shadowBlur: 5,
                shadowColor: MapChartData.colors[index],
              },
              emphasis: {
                label: {
                  show: true
                },
                itemStyle: {
                  color: MapChartData.colors[index],
                  shadowBlur: 5,
                  shadowColor: MapChartData.colors[index],
                }
              }
            }
          ]
        })
      });

    MapChart_chart.setOption(options as ECBasicOption);
  }, [MapChartData]);

  return (
    <div className="w-full h-full">
      <div id="MapChart_chart"  className="h-full w-full"></div>
    </div>
  );
};
export default MapChart;
